<template>
    <!-- <el-upload
    class="avatar-uploader"
    
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
  </el-upload> -->

  <el-img width="100" :src="info.fullUrl" alt=""/>

  <el-image
      style="width: 100px; height: 100px"
      :src="info.fullUrl"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />

    <hr>
    <UploadImg @onchange="change" />
</template>
<script setup lang='ts'>
import {useRoute} from "vue-router"
import {queryOne,UpAvatar} from "../../api/countyment"
import {onMounted,ref} from "vue"
import {UploadImg,ImgData} from "../../components"
const route=useRoute()
const params:unknown=route.query
// route.query
const info=ref<Obj>({})
let srcList=ref<string[]>([])

const getData=async ()=>{
  
   let res:ResData=await queryOne(params as {lead_id:number}) as ResData
   if(res.code==200){
       info.value=res.data
       srcList.value.push(info.value.fullUrl)
   }
  
}

const change=async (data:ImgData)=>{
     console.log(data);
     let param:{lead_id:number}=params as {lead_id:number}
     let res:ResData = await UpAvatar({avatar:data.filename,...param}) as ResData

     if(res.code==200){
        info.value.fullUrl=data.fileurl
     }
     
}

onMounted(()=>{
  getData()
})
</script>
<style scoped >
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
